<template>
	<view class="content">
		<view class="email-img">
			<img src="https://statics.xmcsrv.net/weixin/jEmail.png" alt="">
		</view>
		<view class="title">
			等待邮箱验证
		</view>
		<view class="title1">
			<view class="">
				打开 {{userInfo.account}}验证您的邮箱，
			</view>
			<view class="">
				链接在10分钟内有效。如未收到验证邮件，
			</view>
			请点击 <text style="font-weight: bold;color: #000;">重新发送</text>
		</view>
		<view class="title2">
			验证邮件可能被邮箱拦截，
		</view>
		<view class="title2">
			如收件箱内未找到，请在垃圾邮件中查找
		</view>
		<view class="foot-button">
			<view class="next radius-btn" :class="{'next-active':active}" @click="active?nextAction():''">
				重新发送{{ time != 0 ? time+'s':''}}
			</view>
		</view>
	</view>
</template>

<script>
	const {
		decodeURI
	} = require('@/utils/util.js');
	export default {
		data() {
			return {
				userInfo: {},
				time: 120,
				timerId: null,
			}
		},
		computed: {
			active() {
				if (this.time == 0) {
					return true
				} else return false
			}
		},
		onLoad(opt) {
			this.userInfo = JSON.parse(opt.data)
			this.isMobile = this.userInfo.isMobile;
			this.countDown()
		},
		onUnload() {
			clearInterval(this.timerId)
		},
		methods: {
			// 倒计时
			countDown() {
				this.timerId = setInterval(() => {
					this.time--
					if (this.time < 0) {
						this.time = 0;
						clearInterval(this.timerId)
					}
					this.sendfpLinkHasAct()
				}, 1000)
			},
			//下一步
			nextAction() {
				this.sendEmailCode()
			},
			// 验证码验证
			sendfpLinkHasAct() {
				getApp().globalData.api.sendfpLinkHasAct(this.userInfo.userId, (result) => {
					console.log(result, '验证码验证');
					const res = decodeURI(result.data || '{}');
					if (res.code == 2000) {
						this.time = 0;
						clearInterval(this.timerId);
						uni.showToast({
							title: '修改成功',
							mask: true,
							icon: 'none',
							duration: 1000
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 1000)
					} else {
						// uni.showToast({
						// 	title: CodeMsg[res.code] || res.msg,
						// 	icon: 'none'
						// });
					}
				});
			},
			//发送邮箱验证码
			sendEmailCode() {
				uni.showLoading({
					mask: true
				})
				getApp().globalData.api.sendfpLink(this.userInfo.account, (result) => {
					console.log(result);
					uni.hideLoading();
					this.time = 120;
					this.countDown();
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 40rpx;

		.email-img {
			width: 250rpx;
			height: 250rpx;
			margin: 100rpx auto;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			color: #000000;
			line-height: 40rpx;
			margin-bottom: 70rpx;
		}

		.title1 {
			text-align: center;
			font-size: 30rpx;
			color: #8A8A8A;
			margin-bottom: 90rpx;
		}

		.title2 {
			font-size: 30rpx;
			color: #F57534;
			text-align: center;
		}

		.next {
			margin-top: 40rpx;
			height: 80rpx;
			background: #999;
			color: white;
			//border-radius: 10rpx;
			justify-content: center;
			display: flex;
			align-items: center;
		}

		.next-active {
			background: white;
			border: 1rpx solid #999;
			color: #FF0025;
		}
	}

	.foot-button {
		width: calc(100% - 80rpx);
	}
</style>
